<template>
    <div class="body" v-if="JSON.stringify(order) != '{}'">
        <div class="order">
            <div class="ord_list p">
                <div class="maleri30">
                    <a
                        v-for="(item, i) in order.order_goods"
                        :key="i"
                        @click="
                            $router.push({
                                path: '/shopDetail',
                                query: { id: item.goods_id },
                            })
                        "
                    >
                        <div class="shopprice">
                            <div class="img_or fl">
                                <img :src="item.img_link" />
                            </div>
                            <div class="fon_or fl">
                                <h2 class="similar-product-text">
                                    {{ item.goods_name }}
                                </h2>
                                <p class="csf">{{ item.spec_key_name }}</p>
                            </div>
                            <div class="price_or fr">
                                <p>
                                    <span class="sm">￥</span
                                    ><span id="mgp"
                                        >13.<span class="sm">0</span></span
                                    >
                                </p>
                                <p>x1</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <div class="qqz">
                <div class="maleri30">
                    <a
                        class="closeorder_butt"
                        v-show="
                            (order.order_status == 1 &&
                                order.shipping_status == 0 &&
                                order.pay_status == 1) ||
                            (order.order_status == 0 &&
                                order.shipping_status == 0 &&
                                order.pay_status == 0)
                        "
                        @click="orderCancel(order.order_id, order.pay_status)"
                        ><span class="co-bt">取消订单</span></a
                    >
                    <a
                        class="closeorder_butt"
                        v-show="
                            order.order_status == 2 &&
                            order.shipping_status == 1 &&
                            order.pay_status == 1
                        "
                        @click="turnDiscuss(order.order_id)"
                        >待评价</a
                    >
                </div>
            </div>

            <div class="information_dr ma-to-20">
                <div class="maleri30">
                    <div class="tit">
                        <!-- if condition="$order['pay_code'] eq 'cod'"><i class="tits-ions">货到付款</i></if -->
                        <h2>基本信息</h2>
                    </div>
                    <div class="xx-list">
                        <p class="p">
                            <span class="fl">订单编号</span>
                            <span class="fr">{{ order.order_sn }}</span>
                            <!--<span class="cp-order">复制</span>-->
                        </p>
                        <p class="p">
                            <span class="fl">下单时间</span>
                            <span class="fr"
                                ><span>{{ order.add_time | timer }}</span></span
                            >
                        </p>
                        <p class="p">
                            <span class="fl">收货地址</span>
                            <span
                                class="fr"
                                style="
                                    max-width: 10rem;
                                    line-height: 0.8rem;
                                    overflow: hidden;
                                    text-align: right;
                                    margin-top: 0.7rem;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                "
                                >{{ order.full_address }}</span
                            >
                        </p>
                        <p class="p">
                            <span class="fl">收货人</span>
                            <span class="fr"
                                ><span>{{ order.consignee }}</span
                                ><span>{{ order.mobile }}</span></span
                            >
                        </p>
                        <p class="p">
                            <span class="fl">支付方式</span>
                            <span class="fr">{{ order.pay_name }} </span>
                        </p>
                        <p class="p">
                            <span class="fl">配送方式</span>
                            <span class="fr"
                                >{{ order.shipping_name }}
                                {{ order.shipping_code }}
                                <!---->
                            </span>
                        </p>
                        <p class="p">
                            <span class="fl">发票类型</span>
                            <span class="fr">{{ order.invoice_desc }}</span>
                        </p>
                        <!--<p class="p">-->
                        <!--<span class="fl">发票抬头</span>-->
                        <!--<span class="fr">个人</span>-->
                        <!--</p>-->
                        <!--<p class="p">-->
                        <!--<span class="fl">纳税人识别号</span>-->
                        <!--<span class="fr">无</span>-->
                        <!--</p>-->
                        <p class="p">
                            <span class="fl">买家留言</span>
                            <span class="fr">{{ order.user_note }}</span>
                            <!--<textarea class="m-board" cols="30" rows="10" placeholder="选填：对本次交易的说明，没有则不显示，没有则不显示"></textarea>-->
                        </p>
                    </div>
                </div>
            </div>

            <div class="information_dr ma-to-20">
                <div class="maleri30">
                    <div class="tit">
                        <h2>价格信息</h2>
                    </div>
                    <div class="xx-list">
                        <p class="p">
                            <span class="fl">商品总价</span>
                            <span class="fr"
                                ><span>￥{{ order.goods_price }}元</span>
                            </span>
                        </p>
                        <p class="p">
                            <span class="fl">运费</span>
                            <span class="fr"
                                ><span>￥</span
                                ><span>{{ order.shipping_price }}</span
                                >元</span
                            >
                        </p>
                        <p class="p">
                            <span class="fl">优惠券</span>
                            <span class="fr"
                                ><span>-￥</span
                                ><span>{{ order.coupon_price }}</span
                                >元</span
                            >
                        </p>
                        <p class="p">
                            <span class="fl">活动优惠</span>
                            <span class="fr"
                                ><span>-￥</span
                                ><span>{{ order.order_prom_amount }}</span
                                >元</span
                            >
                        </p>
                        <p class="p">
                            <span class="fl">积分</span>
                            <span class="fr"
                                ><span>-￥</span
                                ><span>{{ order.integral_money }}</span
                                >元</span
                            >
                        </p>
                        <p class="p">
                            <span class="fl">余额</span>
                            <span class="fr"
                                ><span>-￥</span
                                ><span>{{ order.user_money }}</span
                                >元</span
                            >
                        </p>
                        <!-- 预售商品 start -->
                        <!-- 预售商品 end -->
                        <!--价格调整-->
                        <p class="p">
                            <span class="fl">应付金额</span>
                            <span class="fr red"
                                ><span>￥</span
                                ><span>{{ order.order_amount }}</span
                                >元</span
                            >
                        </p>
                    </div>
                </div>
            </div>

            <div class="payit ma-to-20">
                <div class="fr s">
                    <a
                        v-show="
                            order.order_status == 0 &&
                            order.shipping_status == 0 &&
                            order.pay_status == 0
                        "
                        @click="
                            payOrderNew(
                                order.order_id,
                                order.order_sn,
                                order.order_amount
                            )
                        "
                        >立即付款</a
                    >
                    <a
                        class="shop-rebuy paysoon"
                        v-show="
                            order.order_status == 1 &&
                            order.shipping_status == 1 &&
                            order.pay_status == 1
                        "
                        @click="orderConfirm(order.order_id)"
                        >确认收货</a
                    >
                </div>
            </div>
        </div>
        <OrderCancel
            v-if="orderCancelKey"
            @cancelorderCance="cancelorderCance"
            :order_id="orderCancelorder_id"
        />
        <div class="zhanwei"></div>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast, Dialog } from 'vant';
import OrderCancel from '../../components/order/OrderCancel';
export default {
    name: '',
    components: {
        OrderCancel,
    },
    data() {
        return {
            order: {},
            orderCancelKey: false,
            orderCancelorder_id: '',
        };
    },
    computed: {},
    mounted() {
        this.orderDetail();
    },
    methods: {
        turnDiscuss() {},
        // 取消 待发货的取消订单弹窗
        cancelorderCance(data) {
            this.orderCancelKey = false;
            if (data) {
                this.$router.go(-1);
            }
        },
        // 取消订单
        orderCancel(order_id, pay_status) {
            // 待发货的取消订单
            if (pay_status == 1) {
                this.orderCancelKey = true;
                this.orderCancelorder_id = order_id;
                return;
            }
            // 待付款的取消订单
            Dialog.confirm({
                title: '',
                message: '确定要取消订单吗？',
            })
                .then(() => {
                    axiosPost(
                        '/api/order/cancel_order',
                        {
                            order_id: order_id,
                        },
                        (res) => {
                            // console.log(res);
                            Toast({
                                message: res.msg,
                                duration: 2000,
                            });
                            if (res.status != 1) {
                                return;
                            }
                            this.$router.go(-1);
                        }
                    );
                })
                .catch(() => {
                    // on cancel
                });
        },
        // 确认收获
        orderConfirm(order_id) {
            axiosPost(
                '/api/order/order_confirm',
                {
                    order_id: order_id,
                },
                (res) => {
                    // console.log(res);
                    Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                    if (res.status != 1) {
                        return;
                    }
                    this.$router.go(-1);
                }
            );
        },
        // 立即付款
        payOrderNew(order_id, order_sn, order_amount) {
            sessionStorage.orderInfo = JSON.stringify({
                order_id: this.encrypt(order_id),
                order_sn: this.encrypt(order_sn),
                order_amount: this.encrypt(order_amount),
                user_money: this.encrypt(order_amount.user_money),
            });
            this.$router.push('/payOrder');
        },
        // 获取订单
        orderDetail() {
            axiosPost(
                '/api/order/order_detail',
                {
                    order_id: this.$route.query.order_id,
                },
                (res) => {
                    // console.log(res);

                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    this.order = res.data.order;
                }
            );
        },
    },
};
</script>

<style lang="less" scope>
.order {
    .ord_list {
        padding: 0;
    }
    .content {
        background-color: #ffffff;
    }
    .classreturn {
        height: 1.86rem;
        line-height: 1.86rem;
    }
    .classreturn .content .search span {
        font-size: 0.73rem;
    }
    .qqz {
        border: none;
        height: auto;
        background-color: #f7f7f7;
    }
    .shopprice .img_or img {
        width: 3.84rem;
        height: 3.84rem;
        margin-left: 0.53rem;
    }
    .shopprice .img_or {
        margin-top: 0.55rem;
    }
    .maleri30 {
        margin: 0;
    }
    .shopprice .fon_or {
        margin: 0.58rem 0 0 0.62rem;
    }
    .shopprice .fon_or h2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        font-size: 0.55rem;
        font-weight: 500;
        width: 9.96rem;
        height: 0.65rem;
        margin-top: 0;
        color: #1d1d1d;
    }
    .shopprice .fon_or .csf {
        font-size: 0.47rem;
        color: #999999;
        margin-top: 0.41rem;
    }
    .shopprice .fon_or {
        width: 9.96rem;
    }
    .ma-to-20 {
        margin-top: 0;
    }
    .qqz a {
        width: 100%;
        background-color: #fff;
        margin: 0;
        height: 2.2rem;
        padding: 0;
        margin-top: 0.55rem;
    }
    .qqz a .cancel {
        border: solid 0.02rem #cfcfcf;
        display: inline-block;
        width: 3.41rem;
        height: 1.19rem;
        margin: 0.53rem 0.64rem 0;
        text-align: center;
        line-height: 1.19rem;
        color: #262626;
    }
    .shopprice .price_or {
        margin-top: 0;
        float: left;
        margin-left: 0.62rem;
        width: 9.58rem;
        margin-top: 1.79rem;
    }
    .shopprice .price_or p {
        width: 50%;
        float: left;
        margin-top: 0;
    }
    .shopprice .price_or p:first-child {
        text-align: left;
        font-weight: bold;
    }
    .shopprice .price_or p:last-child {
        font-size: 0.64rem;
        color: #1b1b1b;
    }
    .shopprice .price_or p:first-child span {
        font-size: 0.64rem;
        color: #ff2e2e;
        vertical-align: bottom;
    }
    .shopprice .price_or p:first-child span.sm {
        font-size: 0.47rem;
    }
    .tit {
        border: none;
        border-top: 0.34rem solid #f3f4f4;
    }
    .tit h2 {
        padding-left: 0.36rem;
        border-left: 0.11rem solid #262626;
        margin-left: 0.55rem;
        font-size: 0.64rem;
        font-weight: bold;
    }
    .co-bt {
        width: 3.41rem;
        height: 1.19rem;
        border: solid 0.02rem #cfcfcf;
        display: inline-block;
        text-align: center;
        line-height: 1.19rem;
        margin: 0.53rem 0.64rem 0 0;
    }
    .xx-list p {
        padding: 0;
        height: 1.94rem;
        line-height: 1.94rem;
        border-bottom: solid 0.02rem #dddddd;
        margin: 0 0.6rem;
        color: #262626;
        position: relative;
    }
    .xx-list p:last-child {
        height: auto;
    }
    .m-board {
        display: block;
        width: 14.93rem;
        height: 2.99rem;
        background-color: #f2f2f2;
        border: none;
        line-height: 0.51rem;
        font-size: 0.51rem;
        padding: 0.47rem 0.62rem;
        outline: none;
    }
    .xx-list p .fr span {
        margin-left: 0.2rem;
        font-weight: 500;
    }
    .cp-order {
        width: 1.83rem;
        height: 0.77rem;
        border: solid 0.02rem #d4d4d4;
        color: #999999;
        float: right;
        line-height: normal;
        text-align: center;
        margin-top: 0.55rem;
        margin-right: 0.79rem;
        cursor: pointer;
    }
}
</style>
